<!-- 单位选择器 - 弹窗版 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="700px"
  >
    <div class="disFlx checkBox">
      <div class="leftBox">
        <div class="px-15 py-5 disFlxJS bottom1px">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-input
            placeholder="搜索单位名称"
            v-model="getParams.searchValue"
            size="mini"
            class="ml-10"
            clearable
            @clear="getcomOptions"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getcomOptions"
            ></el-button>
          </el-input>
        </div>
        <div class="pl-15 py-5 ovAuto370">
          <el-checkbox-group v-model="checkUser">
            <div v-for="item in comOptions" :key="item.id">
              <el-checkbox :label="item.id">{{ item.cname }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>

      <div class="rightBox">
        <div class="px-15 py-5 disFlxJS bottom1px" style="height: 39px">
          <div>
            已选择<span class="px-5 colorZS">{{ checkUser.length }}</span
            >位成员
          </div>
          <div class="closeBtn" @click="resetSelect">清空</div>
        </div>
        <div class="pl-20 py-5 ovAuto370">
          <div v-for="item in selectList" :key="item.id" style="height: 19.5px">
            {{ item.cname }}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-25 tc">
      <el-button type="primary" size="default" @click="configSelect"
        >{{ confirmText }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getNetworkCompanyList } from "@/api/mesh/index.js";

export default {
  data() {
    return {
      title: '',
      open: false,
      confirmText: '',
      filterIds: [], // 需要过滤的ID

      getParams: {
        searchValue: null,
        pageNum: 1,
        pageSize: 9999,
      },
      isIndeterminate: false,
      checkAll: false,
      checkUser: [], // 选择的专家ID列表
      comOptions: [],
    };
  },
  created() {
    this.getcomOptions();
  },
  methods: {
    openDialog(obj) {
      const { title, confirmText, companyidLs } = obj;
      this.title = title;
      this.confirmText = confirmText;
      this.open = true;
      this.checkUser = [];

      this.filterIds = companyidLs || [];
      this.comOptions = this.comOptions.filter(v=> !this.filterIds.includes(v.id));
    },
    // 获取单位列表
    getcomOptions() {
      getNetworkCompanyList(this.getParams).then((res) => {
        this.comOptions = res.rows.filter(v=> !this.filterIds.includes(v.id));
      });
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkUser = val ? this.comOptions.map((v) => v.id) : [];
      this.isIndeterminate = false;
    },
    // 清空选择
    resetSelect() {
      this.checkUser = [];
    },
    // 确定选择
    configSelect() {
      this.open = false;
      this.$emit('select', this.checkUser)
    },
  },
  computed: {
    selectList() {
      let arrays = [];
      this.comOptions.forEach((v) => {
        if (this.checkUser.includes(v.id)) {
          arrays.push(v);
        }
      });
      return arrays;
    },
  },
  watch:{
    checkUser(nval){
      let checkedCount = nval.length;
      this.checkAll = checkedCount === this.comOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.comOptions.length;
    }
  }
};
</script>

<style lang="scss" scoped>
.checkBox {
  border: solid 1px #e5e5e5;
  border-radius: 5px;
}
.leftBox {
  width: 50%;
  height: 410px;
  border-right: solid 1px #e5e5e5;
}
.rightBox {
  width: 50%;
  height: 410px;
}
.bottom1px {
  border-bottom: solid 1px #e5e5e5;
}
.ovAuto370 {
  height: 370px;
  overflow-y: auto;
}
.closeBtn {
  cursor: pointer;
  color: #f56c6c;
}
</style>
